import React from 'react';
import { Row, Col, Icon, List, Typography, Table, Input, Tooltip, Carousel, Card } from 'antd';
import AxCard from '@/components/AxBase/AxCard';
import style from './style.less';
import { AxPanelSumProps } from './data';
import { AxButton } from '@/components/AxBase';
import { axconst } from '@/shared/axconst';
import AxColumnAction from '@/components/AxList/AxColumnAction';
import { router } from 'umi';

const Search = Input.Search;
const { Meta } = Card;
const AxPanelSum: React.FC<AxPanelSumProps> = props => {
  const { name, greet, desc, statistics = [] } = props;

  return (
    <AxCard style={{ marginBottom: '15px', height: '100%' }}>
      <Row>
        <Col span={10}>
          <p className={style.title_user}>
            <Icon type="user" className={style.title_instructor} />
            &nbsp;{greet}&nbsp;<span className={style.instructor}>{name}</span>
            &nbsp;
            <span style={{ fontSize: 14 }}>
              (当前单位)
              <Tooltip title="申请加入单位">
                <AxButton className="ax-no-class" type="link" icon="plus"></AxButton>
              </Tooltip>
            </span>
          </p>
        </Col>
        <Col span={14} style={{ textAlign: 'right' }}>
          <AxButton
            className="ax-no-class"
            shape="round"
            onClick={() => router.push('/buyer/lab/list/data')}
          >
            采购主体
          </AxButton>
          &nbsp;&nbsp;
          <AxButton
            className="ax-no-class"
            shape="round"
            onClick={() => router.push('/buyer/fund/list/data')}
          >
            项目经费
          </AxButton>
        </Col>
      </Row>
    </AxCard>
  );
};

const AxPanelSum2: React.FC<AxPanelSumProps> = props => {
  return (
    <AxCard style={{ marginBottom: '15px', height: '100%' }}>
      <Row gutter={15} style={{ marginBottom: '25px' }}>
        <Col span={16}>
          <p className={style.title_user}>
            <Icon type="user" className={style.title_instructor} />
            &nbsp;我的订单
          </p>
        </Col>
        <Col span={4}>
          <AxButton
            className="ax-no-class"
            shape="round"
            onClick={() => router.push('/material/goods/data')}
          >
            采买物资
          </AxButton>
        </Col>
        <Col span={4}>
          <AxButton
            className="ax-no-class"
            style={{ float: 'right' }}
            type="link"
            onClick={() => router.push('/buyer/material/order/nocommit')}
          >
            更多
          </AxButton>
        </Col>
      </Row>
      <Row gutter={15}>
        <Col span={8}>
          <div className={style.statistics_box}>
            <p className={style.statistics_value}>8</p>
            <p>待处理</p>
          </div>
        </Col>
        <Col span={8}>
          <div className={style.statistics_box}>
            <p className={style.statistics_value}>18</p>
            <p>进行中</p>
          </div>
        </Col>
        <Col span={8}>
          <div className={style.statistics_box}>
            <p className={style.statistics_value}>38</p>
            <p>总订单</p>
          </div>
        </Col>
      </Row>
    </AxCard>
  );
};

const AxPanelSum3: React.FC<AxPanelSumProps> = props => {
  return (
    <img src="/img/purchase.jpg" style={{ height: 180, width: '100%' }} />
    // <AxCard style={{ marginBottom: '15px', height: 180 }}>
    //   <Row gutter={15}>
    //     <Col span={24}>
    //       <div>
    //       </div>
    //     </Col>
    //   </Row>
    // </AxCard>
  );
};

export const AxPanelMsg2: React.FC<any> = props => {
  const { title, columns = [], data = [], scroll = {}, onClick } = props;

  return (
    <Table
      rowKey={(record: any) => record.id}
      size="small"
      showHeader={false}
      pagination={false}
      scroll={...scroll}
      style={{ backgroundColor: '#fff', border: '0px', borderRadius: 0, marginBottom: 15 }}
      title={() => (
        <Row>
          <Col span={20}>
            <div>
              <Icon type="user" className={style.title_instructor} />
              &nbsp;{title}
            </div>
          </Col>
          <Col span={4}>
            <AxButton
              className="ax-no-class"
              style={{ float: 'right' }}
              type="link"
              onClick={onClick}
            >
              更多
            </AxButton>
          </Col>
        </Row>
      )}
      columns={columns}
      dataSource={data}
    />
  );
};

export const AxPanelMsg4: React.FC<any> = props => {
  const { title, data = [] } = props;

  return (
    <List
      style={{
        backgroundColor: '#fff',
        border: '0px',
        borderRadius: 0,
        height: 273,
        marginBottom: 15,
        paddingBottom: 15,
      }}
      className="ax-ant-spin-container"
      header={
        <Row>
          <Col span={20}>
            <div>
              <Icon type="user" className={style.title_instructor} />
              &nbsp;采购主体
            </div>
          </Col>
          <Col span={4}>
            <AxButton className="ax-no-class" style={{ float: 'right' }} type="link">
              更多
            </AxButton>
          </Col>
        </Row>
      }
      bordered
      dataSource={data}
      renderItem={(item: any) => (
        <List.Item>
          <Typography.Text mark>
            <Icon type="message" />
          </Typography.Text>{' '}
          {item}
        </List.Item>
      )}
    />
  );
};

export const AxPanelMsg5: React.FC<any> = props => {
  const { } = props;

  return (
    <Carousel autoplay style={{ marginBottom: 15, height: 277 }}>
      <div>
        <img src="/img/good1.jpg" style={{ height: 277, width: '100%' }} />
      </div>
      <div>
        <img src="/img/good2.jpg" style={{ height: 277, width: '100%' }} />
      </div>
      <div>
        <img src="/img/good3.jpg" style={{ height: 277, width: '100%' }} />
      </div>
    </Carousel>
  );
};

export const AxPanelMsg6: React.FC<any> = props => {
  const { } = props;

  return (
    <Row gutter={15}>
      <Col span={8}>
        <Card
          hoverable
          // style={{ width: 180 }}
          cover={
            <img
              alt="example"
              src="/img/good4.jpg"
              height="190px"
            />
          }
        >
          <Meta title="TGyrate Basic涡旋混匀仪(基础版)" description="" />
        </Card>
      </Col>
      <Col span={8}>
        <Card
          hoverable
          // style={{ width: 180 }}
          cover={
            <img
              alt="example"
              src="/img/good5.jpg"
              height="190px"
            />
          }
        >
          <Meta title="BeyoCool™细胞冻存盒" description="" />
        </Card>
      </Col>
      <Col span={8}>
        <Card
          hoverable
          // style={{ width: 180 }}
          cover={
            <img
              alt="example"
              src="/img/good6.jpg"
              height="190px"
            />
          }
        >
          <Meta title="多管漩涡混合器 （不含泡沫试管架）" description="" />
        </Card>
      </Col>
    </Row>
  );
};

const InstructorCenter: React.FC<any> = props => {
  let userName: any = 'Bill'; //JSON.parse(userInfo).userName

  /**头部数据 */
  const data: AxPanelSumProps = {
    name: userName,
    greet: '欢迎您',
    desc: '欢迎来到辅导员可视中心,在这里你可以查询到你想要的有效信息！',
    statistics: [
      {
        name: '管理班级数',
        total: 8,
      },
      {
        name: '管理人数',
        total: 425,
      },
    ],
  };

  const MSGdata1 = {
    title: '流程/任务页',
    columns: [
      {
        dataIndex: 'name',
      },
    ],
    data: [
      { id: 0, name: '探火工程项目经费通过通知' },
      { id: 1, name: '探火工程项目经费拒绝通知' },
      { id: 2, name: '探火工程项目经费通过通知' },
      { id: 3, name: '探火工程项目经费拒绝通知' },
      { id: 4, name: '探火工程项目经费通过通知' },
      { id: 5, name: '探火工程项目经费拒绝通知' },
      { id: 6, name: '探火工程项目经费通过通知' },
    ],
  };

  const MSGdata2 = {
    title: '流程/任务页',
    columns: [
      {
        dataIndex: 'name',
        ellipsis: true,
      },
      {
        dataIndex: 'status',
        ellipsis: true,
        width: axconst.width.fouronly,
      },
      {
        dataIndex: 'time',
        ellipsis: true,
        width: axconst.width.time,
      },
      {
        width: axconst.width.twox,
        render: (val: any, record: any) => (
          <AxColumnAction
            buttons={[
              {
                text: '查看',
                // permissions: 1,
              },
            ]}
          />
        ),
      },
    ],
    data: [
      {
        id: 0,
        name: '申请成为采购主体的负责人',
        status: '待审核',
        time: '2020-01-02 17:23:22',
      },
      {
        id: 1,
        name: '申请成为采购主体的使用人',
        status: '待审核',
        time: '2020-01-02 17:23:22',
      },
      {
        id: 2,
        name: '申请探月工程项目经费',
        status: '待审核',
        time: '2020-01-02 17:23:22',
      },
      { id: 3, name: '申请探火工程项目经费', status: '待审核', time: '2020-01-02 17:23:22' },
      { id: 4, name: '申请探月工程项目经费', status: '待审核', time: '2020-01-02 17:23:22' },
      { id: 5, name: '申请探月工程项目经费', status: '通过', time: '2020-01-02 17:23:22' },
      { id: 6, name: '申请探月工程项目经费', status: '驳回', time: '2020-01-02 17:23:22' },
    ],
  };

  const MSGdata3 = {
    title: '流程/任务页',
    columns: [
      {
        dataIndex: 'name',
        ellipsis: true,
      },
      {
        dataIndex: 'time',
        ellipsis: true,
        width: axconst.width.time,
      },
      {
        width: axconst.width.twox,
        render: (val: any, record: any) => (
          <AxColumnAction
            buttons={[
              {
                text: '处理',
                // permissions: 1,
              },
            ]}
          />
        ),
      },
    ],
    data: [
      {
        id: 0,
        name: '张三申请成为采购主体的负责人',
        status: '待审核',
        time: '2020-01-02 17:23:22',
      },
      {
        id: 1,
        name: '李四申请成为采购主体的负责人',
        status: '待审核',
        time: '2020-01-02 17:23:22',
      },
      {
        id: 2,
        name: '王五申请成为采购主体的负责人',
        status: '待审核',
        time: '2020-01-02 17:23:22',
      },
      { id: 3, name: '赵六申请成为采购主体的使用人', status: '待审核', time: '2020-01-02 17:23:22' },
      { id: 4, name: '陈七申请成为采购主体的使用人', status: '待审核', time: '2020-01-02 17:23:22' },
      { id: 5, name: '张三申请探月工程项目经费', status: '通过', time: '2020-01-02 17:23:22' },
      { id: 6, name: '李四申请探月工程项目经费', status: '驳回', time: '2020-01-02 17:23:22' },
      { id: 6, name: '王五申请探月工程项目经费', status: '驳回', time: '2020-01-02 17:23:22' },
      { id: 6, name: '赵六申请探月工程项目经费', status: '驳回', time: '2020-01-02 17:23:22' },
      { id: 6, name: '陈七申请探月工程项目经费', status: '驳回', time: '2020-01-02 17:23:22' },
      { id: 6, name: '张八申请探月工程项目经费', status: '驳回', time: '2020-01-02 17:23:22' },
    ],
  };

  /** 配置列 */
  const data1 = [
    {
      id: 1,
      img: <img src="img/store.png" width={50} />,
      desc: (
        <div className="ent-member-card__info">
          <div className="ent-member-card__name" style={{ display: 'flex' }}>
            <div className="ent-member-card__labels">
              <div className="ax-manager">管理员</div>
            </div>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体名称</span>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体地址</span>
          </div>
          <div className="ent-member-card__description">
            <span>联系电话：15828549799</span>
          </div>
        </div>
      ),
      click: () => router.push({ pathname: '/buyer/lab/inventory/' }),
    },
    {
      id: 2,
      img: <img src="img/store.png" width={50} />,
      desc: (
        <div className="ent-member-card__info">
          <div className="ent-member-card__name" style={{ display: 'flex' }}>
            <div className="ent-member-card__labels">
              <div className="ax-manager ax-user">使用人</div>
            </div>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体名称</span>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体地址</span>
          </div>
          <div className="ent-member-card__description">
            <span>联系电话：15828549799</span>
          </div>
        </div>
      ),
      click: () => router.push({ pathname: '/buyer/lab/inventory/' }),
    },
    {
      id: 3,
      img: <img src="img/store.png" width={50} />,
      desc: (
        <div className="ent-member-card__info">
          <div className="ent-member-card__name" style={{ display: 'flex' }}>
            <div className="ent-member-card__labels">
              <div className="ax-manager ax-user">使用人</div>
            </div>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体名称</span>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体地址</span>
          </div>
          <div className="ent-member-card__description">
            <span>联系电话：15828549799</span>
          </div>
        </div>
      ),
      click: () => router.push({ pathname: '/buyer/lab/inventory/' }),
    },
    {
      id: 4,
      img: <img src="img/store.png" width={50} />,
      desc: (
        <div className="ent-member-card__info">
          <div className="ent-member-card__name" style={{ display: 'flex' }}>
            <div className="ent-member-card__labels">
              <div className="ax-manager ax-user">使用人</div>
            </div>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体名称</span>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体地址</span>
          </div>
          <div className="ent-member-card__description">
            <span>联系电话：15828549799</span>
          </div>
        </div>
      ),
      click: () => router.push({ pathname: '/buyer/lab/inventory/' }),
    },
    {
      id: 5,
      img: <img src="img/store.png" width={50} />,
      desc: (
        <div className="ent-member-card__info">
          <div className="ent-member-card__name" style={{ display: 'flex' }}>
            <div className="ent-member-card__labels">
              <div className="ax-manager ax-user">使用人</div>
            </div>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体名称</span>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体地址</span>
          </div>
          <div className="ent-member-card__description">
            <span>联系电话：15828549799</span>
          </div>
        </div>
      ),
      click: () => router.push({ pathname: '/buyer/lab/inventory/' }),
    },
    {
      id: 6,
      img: <img src="img/store.png" width={50} />,
      desc: (
        <div className="ent-member-card__info">
          <div className="ent-member-card__name" style={{ display: 'flex' }}>
            <div className="ent-member-card__labels">
              <div className="ax-manager ax-user">使用人</div>
            </div>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体名称</span>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体地址</span>
          </div>
          <div className="ent-member-card__description">
            <span>联系电话：15828549799</span>
          </div>
        </div>
      ),
      click: () => router.push({ pathname: '/buyer/lab/inventory/' }),
    },
    {
      id: 7,
      img: <img src="img/store.png" width={50} />,
      desc: (
        <div className="ent-member-card__info">
          <div className="ent-member-card__name" style={{ display: 'flex' }}>
            <div className="ent-member-card__labels">
              <div className="ax-manager ax-user">使用人</div>
            </div>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体名称</span>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体地址</span>
          </div>
          <div className="ent-member-card__description">
            <span>联系电话：15828549799</span>
          </div>
        </div>
      ),
      click: () => router.push({ pathname: '/buyer/lab/inventory/' }),
    },
    {
      id: 8,
      img: <img src="img/store.png" width={50} />,
      desc: (
        <div className="ent-member-card__info">
          <div className="ent-member-card__name" style={{ display: 'flex' }}>
            <div className="ent-member-card__labels">
              <div className="ax-manager ax-user">使用人</div>
            </div>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体名称</span>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体地址</span>
          </div>
          <div className="ent-member-card__description">
            <span>联系电话：15828549799</span>
          </div>
        </div>
      ),
      click: () => router.push({ pathname: '/buyer/lab/inventory/' }),
    },
    {
      id: 9,
      img: <img src="img/store.png" width={50} />,
      desc: (
        <div className="ent-member-card__info">
          <div className="ent-member-card__name" style={{ display: 'flex' }}>
            <div className="ent-member-card__labels">
              <div className="ax-manager ax-user">使用人</div>
            </div>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体名称</span>
          </div>
          <div className="ent-member-card__description">
            <span>采购主体地址</span>
          </div>
          <div className="ent-member-card__description">
            <span>联系电话：15828549799</span>
          </div>
        </div>
      ),
      click: () => router.push({ pathname: '/buyer/lab/inventory/' }),
    },
  ];

  return (
    <AxCard bodyStyle={{ backgroundColor: 'rgb(240,242,245)' }}>
      <Row gutter={15}>
        <Col span={16}>
          <Row gutter={15}>
            <Col span={24}>
              <AxPanelSum {...data} />
            </Col>
          </Row>
          <Row gutter={15}>
            <Col span={12}>
              <AxPanelMsg5 />
              <AxPanelMsg6 />
            </Col>
            <Col span={12}>
              <AxPanelSum2 {...data} />
              <AxPanelMsg2
                {...MSGdata3}
                title="我的待办"
                onClick={() => router.push('/buyer/person/deal/need')}
              />
            </Col>
          </Row>
        </Col>
        <Col span={8}>
          <AxPanelMsg2
            {...MSGdata1}
            title="公告"
            scroll={{ y: 239 - 15 }}
            onClick={() => router.push('/buyer/person/msg')}
          />
          <AxPanelMsg2
            {...MSGdata2}
            title="我的申请"
            onClick={() => router.push('/buyer/person/deal/apply')}
          />
        </Col>
      </Row>
    </AxCard>
  );
};

export default InstructorCenter;
